<script setup>
import {ArrowLeft, Back, FirstAidKit} from "@element-plus/icons-vue";
import {useStore} from "@/stores/store.js";
import {computed, onMounted, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {doAlbumApproval, doMusicApproval} from "@/api/approval/approval.js";
import {getApplyAlbumInfoById} from "@/api/apply/apply.js";
import MusicBall from "@/components/MusicBall.vue";

const props = defineProps(["styles"]);

const rowId = useStore().rowId
function back() {
  useStore().showAlbumDetail = false
  useStore().rowId = ''
}


const row = ref({})


const init = () => {
  getApplyAlbumInfoById(rowId).then((res) => {
    row.value = res.data
    row.value.style = props.styles.find(record => record.id == row.value.styleId).title
    row.value.tempApplyDes = row.value.applyDes
    row.value.musicList.forEach((item) => {
      // 根据批注的初始值来绑定disable状态
      item.tempDes = item.des
    })
    console.log(row.value)
  })
}
onMounted(() => {
  // 这个musicList还是应该在后端动态查询
  init()




})
// 批准申请
const approveMusic = (rowData) => {

  if (rowData.des == null || rowData.des.trim() === '') {
    ElMessage.error('批注不能为空')
    return
  }
  doMusicApproval(rowData.id, 1, rowData.des).then((res) => {
    if (res.data === 'reload') {
      init()
    } else {
      ElMessage.success("同意成功")
      rowData.status = 1
      rowData.tempDes = rowData.des
      rowData.adminEmail = useStore().admin.email

    }
  })
}
// 拒绝申请
const rejectMusic = (rowData) => {
  if (rowData.des == null || rowData.des.trim() === '') {
    ElMessage.error('批注不能为空')
    return
  }
  doMusicApproval(rowData.id, 2, rowData.des).then((res) => {
    if (res.data === 'reload') {
      init()
    } else {
      ElMessage.success("拒绝成功")
      rowData.status = 2
      rowData.tempDes = rowData.des
      rowData.adminEmail = useStore().admin.email
    }
  })
}
const albumApprove = () => {
  if (applyAlbumDes.value === '') {
    ElMessage.error("批注不能为空")
    return
  }
  let flag = false
  // 判别是否有否决的
  let flag2 = false
  row.value.musicList.forEach((item) => {
    if (item.status === 0) {
      // 有一个未处理，就无法提交
      flag = true
      flag2 = true
    }
  })
  if (flag) {
    ElMessage.error("必须全都处理")
    return;
  }
  if (flag2) {
    ElMessage.error("只要有首歌曲无法通过，整个专辑就无法通过")
    return;
  }

  // todo 调用方法
  doAlbumApproval(rowId, 1, row.value.applyDes).then((res) => {
    if (res.data === 'reload') {
      init()

    } else {
      ElMessage.success("审批通过成功")
      row.value.status = 1
      row.value.tempApplyDes = row.value.applyDes

    }
  })
  init()

}
const albumReject = () => {
  if (applyAlbumDes.value === '') {
    ElMessage.error("批注不能为空")
    return
  }
  let flag = false
  row.value.musicList.forEach((item) => {
    if (item.status === 0) {
      // 有一个未处理，就无法提交
      flag = true
    }
  })
  if (flag) {
    ElMessage.error("必须全都处理")
    return;
  }
  // todo 调用方法
  doAlbumApproval(rowId, 2, row.value.applyDes).then((res) => {
      ElMessage.success("审批拒绝成功")
      row.value.status = 2
      row.value.tempApplyDes = row.value.applyDes
  })
  init()


}


const currentMusic = ref({
  url: "",
  name: "",
});

// 点击音乐播放
const playMusic = (music) => {
  currentMusic.value = {
    url: music.musicUrl,
    name: music.name,
  }
  console.log(currentMusic.value.url)
}

</script>

<template>
  <el-page-header style="margin-top: 20px;">
    <template #breadcrumb>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item @click="back()">专辑审批页面</el-breadcrumb-item>
        <el-breadcrumb-item>专辑审批详细页</el-breadcrumb-item>
      </el-breadcrumb>
    </template>
    <template #icon>
        <el-icon @click="back()" :size="30"><ArrowLeft></ArrowLeft></el-icon>
    </template>
    <template #title>
      <div @click="back()" style="font-family: 微軟正黑體;font-size: 20px"> 返回审批页 </div>
    </template>
    <template #content>
      <span > </span>
    </template>
  </el-page-header>
  <MusicBall v-if="currentMusic.url" :musicUrl="currentMusic.url" :musicName="currentMusic.name" />

  <div class="main">
    <div class="album-item">
      <img style="width: 150px;height: 150px;border-radius: 3px" :src="row.cover">
      <div style="display: flex;flex-direction: column;padding-bottom: 3px">
        <div style="color: #2d1a1a;font-size: 28px;font-weight: bold;">{{ row.albumName }}</div>
        <p style="font-size: 12px;color: #3b3b3b;margin-left: 3px;margin-top: 10px">{{ row.musicianName }}</p>
        <p style="font-size: 12px;color: #3b3b3b;margin-left: 3px;margin-top: 7px">{{ row.applyTime }}</p>
        <el-input :disabled="(row.tempApplyDes != '' && row.tempApplyDes != null) || row.status != 0" v-model="row.applyDes" minlength="5" maxlength="100" style="margin-top: auto;" placeholder="请批注，5-100字"></el-input>

      </div>

      <div style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 50px">
        <el-tag v-if="row.status === 0" size="large" type="info">未处理</el-tag>
        <el-tag v-else-if="row.status === 1" size="large" type="success">已批准</el-tag>
        <el-tag v-else size="large" type="danger">已拒绝</el-tag>
        <h1 v-if="row.adminEmail">处理人：<span class="hover">{{ row.adminEmail }}</span></h1>
        <div>
          <el-button plain size="large"
                     @click="albumApprove"
                     :disabled="row.status !== 0"
          >批准</el-button>
          <el-button size="large" style="margin-left: 20px"
                     :disabled="row.status !== 0"
                     @click="albumReject"
          >拒绝</el-button>

        </div>
      </div>

    </div>
    <el-table :data="row.musicList" :cell-style="{ 'border': 'none', 'background-color': '#f4f5f9' }"
              :header-cell-style="{ 'border': 'none', 'background-color': '#f4f5f9' }">
      <el-table-column type="index" />
      <el-table-column label="歌曲" >
        <template #default="scope">
          <div style="display: flex;align-items: center;gap: 5px;">
            <span>{{ scope.row.name }}</span>
            <el-icon size="25" style="cursor: pointer" @click="playMusic(scope.row)"><VideoPlay /></el-icon>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="duration" label="时长" />
      <el-table-column
          prop="status"
          label="状态"
      >
        <template #default="scope">
          <el-tag v-if="scope.row.status === 0" type="info">未处理</el-tag>
          <el-tag v-else-if="scope.row.status === 1" type="success">已批准</el-tag>
          <el-tag v-else type="danger">已拒绝</el-tag>
        </template>

      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button plain
                     @click="approveMusic(scope.row)"
                     :disabled="scope.row.status != 0">批准</el-button>
          <el-button
              :disabled="scope.row.status != 0"
              @click="rejectMusic(scope.row)">拒绝</el-button>
        </template>
      </el-table-column>
      <el-table-column label="批注">
        <template #default="scope">
          <el-input :disabled="(scope.row.tempDes != '' && scope.row.tempDes != null) || scope.row.status != 0" v-model="scope.row.des" minlength="5" maxlength="100" style="margin-top: auto;" placeholder="请批注，5-100字"></el-input>
        </template>
      </el-table-column>
      <el-table-column :formatter="(theRow) => theRow.adminEmail == null ? '暂未处理' : theRow.adminEmail" prop="adminEmail" label="处理人"></el-table-column>

    </el-table>

    <div style="display: flex;flex-direction: column;gap: 20px;margin-top: 50px">

      <div class="apply-info-item">
        <p>歌曲数量：<span style="color: #ff7b4b">{{ row.musicCount }}</span>首</p>
      </div>
      <div class="apply-info-item">
        <p>音乐属性：<span style="color: #ff7b4b">{{ row.style }}</span></p>
      </div>

      <div class="apply-info-item">
        <p>音乐人所属账号：<span style="color: #bbbbbb">{{ row.musicianAccount }}</span></p>
      </div>

      <div class="apply-info-item">
        <p>专辑简介：</p>
        <p style="white-space: pre-wrap;color: #bbbbbb">{{ row.des }}</p>
      </div>
    </div>

  </div>
</template>

<style scoped>
:deep(.i) {
  width: 20px;
}
.album-item {
  display: flex!important;
  margin: 15px 0;
  gap: 20px;
  border-radius: 10px;
}
.main {
  padding: 20px 30px;
}
.apply-info-item {
  font-size: 13px;
  display: flex
}
.apply-info-item>p:first-child {
  color: #3d3d3d;
  width: 300px;
}


</style>
